<template><!--shoppingCart.wxml-->
	<view :class="['shopping-cart-container', 'top-1']">
		<block v-if="goodsLists.length === 0">
			<view class="shopping-cart-empty-component-container">
				<image class="icon_shopping_cart" src="../../static/img/shoppingCart/icon_shopping_cart.png" />
				<view class="tips_empty">您的购物车是空的，选一些宝贝吧</view>
				<view class="btn_look" @tap="toHome">随便逛逛</view>
			</view>
		</block>
		<block v-else>
			<view class="shopping-cart-edit">
				<view class="shopping-cart-edit-btn" @tap="onManage">{{ !showAllDelete ? '管理' : '完成' }}</view>
			</view>
			<view class="shopping-cart-goods-container">
				<block v-for="(item, index) in goodsLists" :key="item.productId">
					<view class="shopping-cart-goods-item-component-container">
						<view :class="['left', { 'showDel': item.bShowDel }]" @touchstart="onTouchStart"
							@touchend="onTouchEnd">
							<image class="icon_flag"
								:src="item.bChecked ? '../../static/img/components/circle_1.png' : '../../static/img/components/circle_0.png'"
								@tap="goodsStatusClick(index)" />
							<image class="icon_shop" :src="item.product.productSquareUrl" @tap="() => onGotoDetail(item)" />
							<view class="content">
								<view class="text title" @tap="() => onGotoDetail(item)">{{ item.product.productName }}
								</view>
								<view class="text" @tap="() => onGotoDetail(item)">{{ item.product.productDesc }}</view>
								<view class="bottom">
									<view class="money">￥{{ item.product.currentPrice }}</view>
									<view class="count-component-containter">
										<view class="common_view_bg del" @tap="bindDel(index)"> - </view>
										<view class="common_view_bg num"><input :value="item.count" disabled /></view>
										<view class="common_view_bg add" @tap="bindAdd(index)"> + </view>
									</view>
								</view>
							</view>
						</view>
						<view class="right" v-if="item.bShowDel" @tap="delOne(index)">删除</view>
					</view>
				</block>
			</view>
		</block>
		<HotRecommend></HotRecommend>
		<view v-if="goodsLists.length !== 0" class='settlement-column-tab-component-containter'>
			<block>
				<!--勾选状态-->
				<image class="circle" @tap="checkAllChange"
					:src="checkAll ? '../../static/img/components/circle_1.png' : '../../static/img/components/circle_0.png'"
				/>
				<view @tap="checkAllChange" class="all">全选</view>
			</block>
			<view class="total">
				<block v-if="!showAllDelete">
					<view>合计：<span class="money">￥{{ priceCount }}</span></view>
					<!-- <view class="tips">不包含运费</view>-->
				</block>
			</view>
			<block v-if="showAllDelete">
				<view class="btn_purcharse" @tap="delGoods">
					删除（{{ selectGoods.length }}）
				</view>
			</block>
			<block v-else>
				<view class="btn_purcharse" @tap="onPurcharse">
					结算
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import Big from 'big.js';
import Goods from '../components/goods';
import HotRecommend from '../components/hotRecommend/index.vue';
import { cartDelete, cartQuery, cartUpdate } from '../../api/cart.js';
import { showToast } from '../../utils/promise.js';

export default {
	data() {
		return {
			enableGoodsSelect: false,
			curRelativePath: '../../../../../',
			productObj: null, //商品推荐列表
			goodsLists: [], //购物车商品列表
			cartGoodsBottomInfo: null, //商品下方结算栏
			showAllDelete: false, //是否显示批量删除功能
			arrModuleData: [],
			bShowDel: false, //是否显示删除按钮
			startOffLeft: 0, //水平-起始时位置
			selectGoods: [],
			priceCount: 0,
			checkAll: false,
			hotRecommend: []
		}
	},
	components: {
		Goods,
		HotRecommend
	},
	mounted() {
		//this.homeInit();
	},
	onLoad() {

	},
	methods: {
		getCartList() {
			cartQuery().then((res) => {
				console.log(res)
				const {code, data, msg} = res
				if(code === 200) {
					data.forEach((e) => {
						e.product.originalPrice = new Big(e.product.originalPrice).div(100);
						e.product.currentPrice = new Big(e.product.currentPrice).div(100);
						e.bChecked = false;
						e.bShowDel = false;
					})
					this.goodsLists = data
				}
			}).catch((err) => {
				console.log(err)

			})
		},
		cartUpdata(item) {
			let params = {
				ids: [item.id],
				count: item.count,
				productId: item.product.productId,
        random: '',
        sign: ''
			}
			cartUpdate(params).then((res) => {
				// console.log(res)
				const {code, data, msg} = res
				if(code === 200) {
					data.forEach((e) => {
						e.product.originalPrice = new Big(e.product.originalPrice).div(100);
						e.product.currentPrice = new Big(e.product.currentPrice).div(100);
						if (this.selectGoods.indexOf(e.id) !== -1) {
							e.bChecked = true;
						}
					})
					this.goodsLists = data;
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		toHome() {
			uni.switchTab({
				url: '/pages/ShoppingList/index'
			})
		},
		onShow() {
			this.onRefresh();
		},
		onHide() {
			// //离开页面删除收货地址
			// var data = getHashData();
			// delete data.selectedAddress;
		},
		countPrice() {
			let goodsLists = this.goodsLists;
			let price = 0;
			goodsLists.forEach((e) => {
				if (e.bChecked) {
					let x = new Big(Number(e.product.currentPrice));
					price = x.times(e.count).plus(price);
				}
			});
			this.priceCount = price;
		},
		goodsStatusClick(index) {
			let selectGoods = this.selectGoods;
			if (!this.goodsLists[index].bChecked) { //新增
				selectGoods.push(this.goodsLists[index].id)
			} else {
				selectGoods = selectGoods.filter((e) => e !== this.goodsLists[index].id)
			}
			this.goodsLists[index].bChecked = !this.goodsLists[index].bChecked;
			this.selectGoods = selectGoods;
			this.checkAll = (selectGoods.length === this.goodsLists.length);
			this.countPrice();
		},
		checkAllChange() {
			let temp = [];
			this.goodsLists.forEach((e) => {
				e.bChecked = !this.checkAll;
				if (!this.checkAll) {
					temp.push(e.id)
				}
			})
			this.selectGoods = temp;
			this.checkAll = !this.checkAll;
			this.countPrice();
		},
		//跳转到商品详情
		onGotoDetail(item) {
			uni.navigateTo({
				url: '/pages/goodsDetail/index?productId=' + item.product.productId,
			})
		},
		/**
		 * 处理向左或者向右滑动，决定显示是否删除
		 * @param  e 
		 */
		onTouchStart(e) {
			this.startOffLeft = e.changedTouches[0].clientX;
		},
		onTouchEnd(e) {
			// let distace = e.changedTouches[0].clientX - this.startOffLeft;
			// if (Math.abs(distace) <= 30) return;
			// this.bShowDel = (distace < 0)
		},
		delOne(index) {
			console.log(index);
		},
		bindDel(index) {
			if (this.goodsLists[index].count === 1) {
				return
			}
			this.goodsLists[index].count -= 1;
			this.countPrice();
			this.cartUpdata(this.goodsLists[index]);
		},
		bindAdd(index) {
			this.goodsLists[index].count += 1;
			this.countPrice();
			this.cartUpdata(this.goodsLists[index]);
		},
		//刷新界面
		onRefresh() {
			this.getCartList();
			this.selectGoods = [];
			this.priceCount = 0;
			this.checkAll = false;
		},
		//管理
		onManage() {
			this.showAllDelete = !this.showAllDelete;
		},
		onPurcharse() {
			if (this.selectGoods.length === 0) {
				uni.showToast({
					title: '请选择商品',
					icon: 'error'
				});
			} else {
				let temp = [];
				this.goodsLists.forEach((e) => {
					if (this.selectGoods.indexOf(e.id) !== -1) {
						e.product.count = e.count;
						e.product.cartId = e.id;
						temp.push(e.product);
					}
				})
				uni.setStorage({
					data: temp,
					key: 'purchaseItem',
				});
				uni.navigateTo({
					url: '/pages/orderConfirm/index',
				})
			}
		},
		delGoods() {
			if (this.selectGoods.length === 0) {
				showToast({
					title: '请选择要删除的商品',
					icon: 'error'
				})
			}
			let params = {
				ids: this.selectGoods,
				random: '',
				sign: ''
			}
			cartDelete(params).then((res) => {
				// console.log(res)
				const {code, data, msg} = res
				if(code === 200) {
					this.goodsLists = data
				}
			})
		},
		showSelect() {
			this.setData({
				enableGoodsSelect: true
			});
		},
		closeSelect() {
			this.setData({
				enableGoodsSelect: false
			});
		},
		addCart() {
			showTxtToast("已成功加入购物车");
			this.closeSelect();
		}
	}
}
</script>

<style scoped>
.home_popular {
	text-align: center;
	margin: 25rpx 0;
}

.home_popular_img {
	height: 80rpx;
	width: 315rpx;
}

.shopping-cart-container {
	position: relative;
	width: 100%;
	min-height: 100%;
	background-color: #f5f5f5;
	padding-bottom: 170rpx;
}

.shopping-cart-container .warm-prompt-panel {
	position: relative;
	margin: 80rpx 0 0;
	background: rgba(255, 255, 255, 1);
	padding: 15rpx 20rpx;
	font-size: 24rpx;
	line-height: 48rpx;
	display: inline-block;
}

.shopping-cart-container .warm-prompt-panel .red {
	margin: 0 5rpx;
	color: #f25500;
}

.padding-bottom {
	padding-bottom: 100rpx;
}

.shopping-cart-edit {
	position: fixed;
	top: 0;
	width: 100%;
	height: 75rpx;
	background: #fff;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.shopping-cart-edit-btn {
	font-size: 26rpx;
	color: rgba(51, 51, 51, 1);
	margin-right: 50rpx;
}

.section {
	margin-bottom: 100rpx;
}

shopping-cart-empty-component {
	width: 100%;
}

.shopping-cart-empty-component-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #f5f5f5;
	width: 100%;
	height: 560rpx;
}

.shopping-cart-empty-component-container .icon_shopping_cart {
	margin: 80rpx 0 0;
	width: 233rpx;
	height: 194rpx;
}

.shopping-cart-empty-component-container .tips_empty {
	width: 100%;
	height: 28rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 28rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 10rpx 0 0;
}

.shopping-cart-empty-component-container .btn_look {
	width: 353rpx;
	height: 80rpx;
	/* background: linear-gradient(90deg,
			rgba(242, 85, 0, 1) 0%,
			rgba(252, 67, 83, 1) 100%); */
			
	background-color: #0F4C97;
	border-radius: 40rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 1);
	line-height: 80rpx;
	text-align: center;
	margin: -30rpx 0 0;
}

shopping-cart-goods-item-component {
	width: 100%;
}

.shopping-cart-goods-item-component-container {
	width: 94%;
	height: 270rpx;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border-radius: 10rpx;
	margin: 20rpx 0 20rpx 3%;
	background: #fff;
	overflow-x: hidden;
}

.showDel {
	margin-left: -200rpx;
}

.left {
	width: 100%;
	height: 270rpx;
	position: relative;
}

.right {
	width: 200rpx;
	height: 270rpx;
	background: red;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.icon_flag {
	position: absolute;
	width: 42rpx;
	height: 42rpx;
	margin-left: 3%;
	top: 50%;
	transform: translateY(-50%);
}

.icon_shop {
	width: 160rpx;
	height: 160rpx;
	position: absolute;
	margin-left: 11%;
	top: 50%;
	transform: translateY(-50%);
}

.content {
	position: absolute;
	height: 270rpx;
	width: calc(85% - 156rpx);
	margin-left: 35.5%;
	top: 50%;
	transform: translateY(-50%);
	overflow-x: hidden;
}

.bottom {
	width: calc(94%);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding-right: 10rpx;
	margin-top: 20rpx;
}

.text {
	font-size: 30rpx;
	color: rgba(51, 51, 51, 1);
	line-height: 50rpx;
	height: 50rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 96%;
}

.title {
	margin-top: 11%;
}

.cnt {
	font-size: 26rpx;
	color: rgba(153, 153, 153, 1);
	margin-top: 3%;
}

.money {
	font-size: 30rpx;
	font-weight: bold;
	color: rgba(242, 85, 0, 1);
}

.count-component-containter {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
}

.count-component-containter .common_view_bg {
	min-width: 56rpx;
	font-weight: 500;
	background: rgba(242, 242, 242, 1);
	color: rgba(102, 102, 102, 1);
	line-height: 48rpx;
	font-size: 26rpx;
	border: 1rpx solid #fff;
	text-align: center;
}

.count-component-containter .del,
.add {
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.count-component-containter .num {
	line-height: 56rpx;
	display: inline-block;
}

.count-component-containter .num input {
	width: 50rpx;
	margin: 0 10rpx;
	height: 56rpx;
}

.shopping-cart-goods-container {
	margin-top: 80rpx;
	margin-bottom: 100rpx;
}

.top-1 {
	padding-top: 1rpx;
}

.settlement-column-tab-component-containter {
	position: fixed;
	bottom: 0%;
	width: 100%;
	height: 130rpx;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	background: rgba(255, 255, 255, 1);
	border-top: 1rpx solid rgba(245, 245, 245, 1);
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.settlement-column-tab-component-containter .circle {
	width: 42rpx;
	height: 44rpx;
	margin: 0 0 0 50rpx;
}

.settlement-column-tab-component-containter .all {
	font-size: 26rpx;
	color: rgba(51, 51, 51, 1);
	line-height: 48rpx;
	margin: 0 0 0 20rpx;
}

.settlement-column-tab-component-containter .total {
	width: calc(100% - 440rpx);
	text-align: right;
	font-size: 26rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.settlement-column-tab-component-containter .total .tips {
	font-size: 20rpx;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
}

.settlement-column-tab-component-containter .btn_purcharse {
	width: 250rpx;
	height: 130rpx;
	background: linear-gradient(90deg,
			rgba(242, 85, 0, 1) 0%,
			rgba(252, 67, 83, 1) 100%);
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.money {
	color: red;
}
</style>
